<template>
	  <div class="console">
	<el-menu
	    :default-active="activeIndex"
	    class="el-menu-demo"
	    mode="horizontal"
	    @select="handleSelect">
		
	    <el-menu-item index="1"
		@click="switchTab(shen)"
		>请休假申请</el-menu-item>
	
	    <el-menu-item index="2"
		@click="switchTab(yi)"
		>考勤异常处理</el-menu-item>
	  </el-menu>
	   <div class="h-6" />
	
  <!-- 动态组件 -->
    <div class="content">
      <component :is="currentComponent" />
    </div>
	   
	   
	  </div>
	  
</template>





<script lang="ts" setup>
import { ref } from 'vue'
import shen from './com/shen.vue'
import yi from './com/yi.vue'
type ComponentName = 'shen' | 'yi'
 
// 响应式状态
const currentComponent = ref(shen)
 
// 方法
const switchTab = (component: ComponentName) => {
  currentComponent.value = component
}




const activeIndex = ref('1')
const isVisible = ref(true);
const data = reactive([
	{
		zhuang: '已完成',
		jieidan: '归档',
		time: '2024-05-16 09:31:57',
		people: '体验用户',
		lie: '病假',
		stime:'2024-05-09 09:00:00——05-10 18:00:00',
	},
	
	{
		zhuang: '未完成',
		jieidan: '待部门审核',
		time: '2024-07-12 10:21:37',
		people: '体验用户',
		lie: '婚假',
		stime:'2024-07-12 09:00:00——05-10 18:00:00',
	},
	
	
	
])


</script>

<style lang="scss" scoped>
	  @use './style';
 .card {
	  
	 //margin-left: 73%;
	 margin-top: 1rem;
    width: 100%;
    height: 12rem;
    overflow: hidden;

    .card-header {
		//width: 15rem;
	margin-top: 1rem;
      padding-left: 25px !important;
    }

    :deep(.el-table__body tr:last-child td) {
      border-bottom: none !important;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 6px;
    }

    .user-name {
      margin-left: 10px;
    }
  }
</style>